<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <el-header class="header-container">
        <div class="headerTitle">查询条件</div>
        <div class="header-content">
          <el-form :model="headerSearchForm" label-width="auto" class="header-search-form">
            <el-form-item label="任务名称">
              <el-input v-model="headerSearchForm.productionLine" placeholder="请输入任务名称" style="width:170px" />
            </el-form-item>
            <el-form-item label="进度">
              <el-input v-model="headerSearchForm.variableDescription" placeholder="请输入进度" style="width:120px" />
            </el-form-item>
            <el-form-item label="提交人">
              <el-input v-model="headerSearchForm.variableName" placeholder="请输入提交人" style="width:120px" />
            </el-form-item>
            <el-form-item label="开始时间" style="margin-left:20px">
                <el-date-picker
                    v-model="headerSearchForm.start"
                    type="datetime"
                    class="w-15vw"
                    placeholder="选择开始时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" style="margin-left:20px">
               <el-date-picker
                    v-model="headerSearchForm.end"
                    type="datetime"
                    class="w-15vw "
                    placeholder="选择结束时间">
               </el-date-picker>
            </el-form-item>
            

                
          </el-form>
          <div class="header-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="table-container-main">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="serialNumber" label="序号" fixed="left">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="areaCode" label="任务名称" />
            <el-table-column prop="deviceCode" label="钢种" />
            <el-table-column prop="variableName" label="仿真类型" />
            <el-table-column prop="variableAlias" label="进度" />
            <el-table-column prop="variableDescription" label="提交人" />
            <el-table-column prop="dataSource" label="备注" />
            <el-table-column prop="triggerMark" label="时间" />
            <el-table-column label="操作" fixed="right" width="240">
              <template #default="scope">
                <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button type="warning" @click="handleCheck(scope.row)">查看</el-button>
                <el-button type="primary" @click="handleQuote(scope.row)">引用</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
    <el-dialog v-model="dialogVisible" title="轧制规程仿真" style="text-align: left;width: 80%;--el-dialog-title-font-size: 16px;">
        <el-row>
            <el-col style="font-size:12px">
                <div class="msg-title">PDI信息输入</div>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
            <el-col :span="3" style="font-size:12px">
                <div>
                  <span>产品牌号</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产品编号" style="width:80px;height:20px;margin-left:4px;" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <span>屈服强度</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产品编号" style="width:80px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <span>入口厚度</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产品编号" style="width:80px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <span>入口宽度</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产品编号" style="width:80px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <span>成品厚度</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产品编号" style="width:80px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <span>成品宽度</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产品编号" style="width:80px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <el-button type="primary" @click="handleQuote(scope.row)" style="height:20px;margin-left:4px">查询工艺参数</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
            <el-col :span="5" style="font-size:12px;">
                <div>
                  <span>任务名称</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产品编号" style="width:160px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="5" style="font-size:12px;margin-left:10px">
                <div>
                  <span>提交人</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产品编号" style="width:160px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="5" style="font-size:12px;">
                <div>
                  <span>备注</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产品编号" style="width:180px;height:20px;margin-left:4px" />
                </div>
            </el-col>


        </el-row>
        <el-row>
            <el-col style="font-size:12px">
                <div class="msg-title">轧制规程参数</div>
            </el-col>
        </el-row>

        <el-row style="margin-top:10px;margin-left:15px;display:flex">
            <el-col style="font-size:12px;" :span="18">
                <el-table :data="footTable" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }"
                                :cell-style="{fontSize:'12px'}">
                    <el-table-column prop="卷号" label="轧制规程参数" />
                    <el-table-column prop="钢种" label="BEFORE" />
                    <el-table-column prop="宽度" label="S1" />
                    <el-table-column prop="厚度" label="S2" />
                    <el-table-column prop="命中率" label="S3" />
                    <el-table-column prop="命中率" label="S4" />
                    <el-table-column prop="命中率" label="S5" />
                </el-table>
            </el-col>
            <el-col :span="5">
                <nercar-echarts
                      :graphic="echartsListOptions[0].graphic"
                      :title="echartsListOptions[0].title"
                      :grid="echartsListOptions[0].grid"
                      :x-axis="echartsListOptions[0].xAxis"
                      :y-axis="echartsListOptions[0].yAxis"
                      :tooltip="echartsListOptions[0].tooltip"
                      :series="echartsListOptions[0].series"
                      style="width:260px;height:190px !important;"
                />

            </el-col>
        </el-row>
        <el-row>
            <el-col style="font-size:12px">
                <div class="msg-title">仿真计算结果输出</div>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
            <el-col style="font-size:12px;">
                <el-table :data="footTable" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }" :cell-style="{fontSize:'12px'}">
                    <el-table-column prop="卷号" label="计算结果" />
                    <el-table-column prop="钢种" label="BEFORE" />
                    <el-table-column prop="宽度" label="S1" />
                    <el-table-column prop="厚度" label="S2" />
                    <el-table-column prop="命中率" label="S3" />
                    <el-table-column prop="命中率" label="S4" />
                    <el-table-column prop="命中率" label="S5" />
                </el-table>
            </el-col>
        </el-row>

        
    </el-dialog>


  </div>
</template>
<script lang="ts">
  import { ref, reactive, computed, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import { ElMessage } from 'element-plus';
  import '/@/views/RollingSimulation/rollingSimulationModelCommonStyle.less';
  import NercarEcharts from '/@/components/NercarEcharts/NercarEcharts.vue'

  interface SearchForm {
    productionLine: string;
    variableDescription: string;
    variableName: string;
    start:string,
    end:string
  }

  export default defineComponent({
    name: 'DataDictionary',
    setup() {
      // 表单数据
      const headerSearchForm = reactive<SearchForm>({
        productionLine: '',
        variableDescription: '',
        variableName: '',
        start:'',
        end:''
      });
      const dialogVisible = ref<boolean>(false);

      // 表格数据
      const tableData = ref([
        {
          productionLine: 'X1234567890',
          areaCode: 'St12',
          deviceCode: '轧制规格仿真',
          variableName: '0',
          variableAlias: 'admin',
          variableDescription: '',
          dataSource: '2024-01-01 08:00:00',
        },
        {
          productionLine: 'X1234567890',
          areaCode: 'LC1180',
          deviceCode: '轧制规格仿真',
          variableName: '0',
          variableAlias: 'admin',
          variableDescription: '',
          dataSource: '2024-01-01 08:00:00',
          
        }
      ]);

      const dataSourceType = ref('');


      const dataSourceTypeOptions = ref([
        { label: 'PLC', value: 'PLC' },
        { label: '传感器', value: '传感器' },
        { label: 'AI算法', value: 'AI算法' },
        { label: '称重传感器', value: '称重传感器' },
        { label: '电池管理系统', value: '电池管理系统' },
      ]);

      const footTable = ref([
        { 卷号: '工作辊直径(mm)', 钢种: '-', 宽度: '430', 厚度: '440', 命中率: '450' },
        { 卷号: '单位张力(MPa)', 钢种: '40', 宽度: '97.4', 厚度: '121', 命中率: '134.8' },
        { 卷号: '比变形率', 钢种: '-', 宽度: '32', 厚度: '30', 命中率: '26' },
        { 卷号: '轧制卷数', 钢种: '-', 宽度: '100', 厚度: '100', 命中率: '100' },
        { 卷号: '支撑辊辊径(mm)', 钢种: '-', 宽度: '1300', 厚度: '1300', 命中率: '1300' },
      ]);

      // 分页数据
      const pagination = reactive({
        currentPage: 1,
        pageSize: 10,
        total: tableData.value.length,
      });

      // 窗口大小变化处理
      const handleResize = () => {
        nextTick(() => {
          // 这里可以添加表格自适应高度的逻辑
        });
      };

      const handleCheck = (row: any) => {
        dialogVisible.value = true;
      }

      // 获取表格数据
      const fetchTableData = async () => {
        try {
          // 这里添加获取数据的API调用
          // const res = await api.getTableData({ ...headerSearchForm, ...pagination });
          // tableData.value = res.data;
          // pagination.total = res.total;
        } catch (error) {
          ElMessage.error('获取数据失败');
        }
      };

      // 查询方法
      const handleSearch = () => {
        pagination.currentPage = 1;
        fetchTableData();
      };

      // 重置方法
      const handleReset = () => {
        (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
          headerSearchForm[key] = '';
        });
        handleSearch();
      };


      // 删除方法
      const handleDelete = (row: any) => {
        // 这里添加删除逻辑
        console.log('删除', row);
      };

      // 分页大小变化
      const handleSizeChange = (val: number) => {
        pagination.pageSize = val;
        fetchTableData();
      };

      // 页码变化
      const handleCurrentChange = (val: number) => {
        pagination.currentPage = val;
        fetchTableData();
      };

      // 生命周期钩子
      onMounted(() => {
        // fetchTableData();
        window.addEventListener('resize', handleResize);
      });

      onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
      });

    const form = reactive({
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
    })
    const echartsListOptions=[
    {
        title: {
        show: true,
        text: '',
        textStyle: {
            color: '#fff'
        }
        },
        graphic: [
        {
            type: 'text',
            bottom: 45, // 距离底部的固定距离
            right: 16, // 距离底部的固定距离
            style: {
            text: '(m)', // X轴名称
            fill: '#fff',
            fontSize: 12,
            align: 'center'
            }
        }
        ],
        toolbox: {
        feature: {
            dataZoom: {
            yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
        },
        tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: { color: '#fff' },
            crossStyle: { color: '#6d7882' }
        }
        },
        grid: {
            left: '10%',
            right: '17%',
            bottom: '5%',
            containLabel: true
        },
        dataZoom: [
        {
            type: 'slider', //滑动条
            show: true, //开启
            xAxisIndex: [0]
        }, //X轴内置滑动
        {
            type: 'inside', //内置滑动，随鼠标滚轮展示
            xAxisIndex: [0]
        }
        ],
        xAxis: [
        {
            type: 'category',
            name: '变形率(%)',
            nameLocation:'end',     //设置name位置  start或者end

            nameTextStyle: {

                color: "#6d7882",

                fontSize:8,

                padding: [0, 0, 0, -10] // 四个数字分别为上右下左与原位置距离

            },
            data: ['A', 'B', 'C','D'],
            splitLine: { show: false },

        }
        ],
        yAxis: {
            type: 'value',
            name: '屈服强度(MPa)',
            nameTextStyle: {
                fontSize:'8px',
                color: '#6d7882' // 设置 y 轴名称的颜色为红色
            },
            scale: true, //纵坐标自适应
            splitLine:{
                show:false
            }

        },
        series: [
        
        {
            name: '',
            data: [10, 22, 28, 43],
            type: 'line',
            stack: 'x',
            smooth: true,
            symbolSize: 1,
        }]
    }]


      return {
        headerSearchForm,
        tableData,
        pagination,
        handleSearch,
        handleReset,
        handleCheck,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        dataSourceTypeOptions,
        dataSourceType,
        dialogVisible,
        form,
        footTable,
        echartsListOptions
      };
    },
  });
</script>
<style scoped lang="less">
.msg-title {
    top: -4vh;
    left: 39.5vw;
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2vh;
    font-weight: bolder;
    width: 10vw;
}

:deep(.el-table .cell) {
  line-height:14px

}
::v-deep .el-table--enable-row-transition .el-table__body td{
  padding-top: 4px;
  padding-bottom:4px;
}

</style>
